<!DOCTYPE html>
<html>
<head>
    <title>a</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1, minimal-ui"/>
    <style>
        th {
            font-weight: normal;
            width: 230px;
        }

        .title {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="title">追书云推广：</div>
<span>微信内：</span>
<table border="1" width="2500">
    <thead>
    <tr>
        <th>名称</th>
        <th>点击数</th>
        <th>点击人数</th>
        <th>注册用户数</th>
        <th>注册成本</th>
        <th>付费转化率</th>
        <th>新增关注</th>
        <th>新增关注率</th>
        <th>新关成本</th>
        <th>付费用户</th>
        <th>首充用户数</th>
        <th>成本</th>
        <th>累计充值</th>
        <th>累计充值成本率</th>
        <th>72小时累计充值总额</th>
        <th>72小时累计充值回本率</th>
        <th>72小时充值总额</th>
        <th>72小时回本率</th>
    </tr>
    </thead>
    <tbody id="tbMain1"></tbody>
</table>
<table border="1" width="2500">
    <thead>
    <tr>
        <th>推广名称</th>
        <th>预计发送时间</th>
        <th>推广员</th>
        <th>书名</th>
        <th>点击数</th>
        <th>点击人数</th>
        <th>注册用户数</th>
        <th>注册成本</th>
        <th>付费转化率</th>
        <th>新增关注</th>
        <th>新增关注率</th>
        <th>新关成本</th>
        <th>付费用户</th>
        <th>首充用户数</th>
        <th>成本</th>
        <th>72小时累计充值总额</th>
        <th>72小时累计充值回本率</th>
        <th>公司名称</th>
    </tr>
    </thead>
    <tbody id="tbMain2"></tbody>
</table>
<div class="title">信息流推广：</div>
<table border="1" width="2500">
    <thead>
    <tr>
        <th>名称</th>
        <th>点击数</th>
        <th>点击人数</th>
        <th>注册用户数</th>
        <th>注册成本</th>
        <th>付费转化率</th>
        <th>付费用户</th>
        <th>首充用户数</th>
        <th>成本</th>
        <th>累计充值</th>
        <th>累计充值成本率</th>
        <th>24小时累计充值</th>
        <th>24小时累计充值回本率</th>
        <th>72小时充值总额</th>
        <th>72小时累计充值回本率</th>
    </tr>
    </thead>
    <tbody id="tbMain3"></tbody>
</table>
<table border="1" width="2500">
    <thead>
    <tr>
        <th>推广名称</th>
        <th>预计发送时间</th>
        <th>推广员</th>
        <th>书名</th>
        <th>点击数</th>
        <th>点击人数</th>
        <th>注册用户数</th>
        <th>注册成本</th>
        <th>付费用户</th>
        <th>成本</th>
        <th>累计充值</th>
        <th>累计充值成本率</th>
        <th>72小时累计充值总额</th>
        <th>72小时累计充值回本率</th>
        <th>24小时充值总额</th>
        <th>24小时充值回本率</th>
        <th>72小时充值总额</th>
        <th>72小时回本率</th>
    </tr>
    </thead>
    <tbody id="tbMain4"></tbody>
</table>
</body>
</html>
<script type="text/javascript">
    //模拟一段JSON数据，实际要从数据库中读取
    var data = [
        {bookname: "3月推广合计", name: "5666", number: "525"},
        {bookname: "3月推广合计", name: "5666", number: "525"}
    ];

    var data2 = [
        {bookname: "3月推广合计", name: "5666", number: "525"},
        {bookname: "3月推广合计", name: "5666", number: "525"}
    ];

    var data3 = [
        {bookname: "3月推广合计", name: "5666", number: "525"},
        {bookname: "3月推广合计", name: "5666", number: "525"}
    ];

    var data4 = [
        {bookname: "3月推广合计", name: "5666", number: "525"},
        {bookname: "3月推广合计", name: "5666", number: "525"}
    ];
    window.onload = function () {
        var tbody1 = document.getElementById("tbMain1");
        var tbody2 = document.getElementById("tbMain2");
        var tbody3 = document.getElementById("tbMain3");
        var tbody4 = document.getElementById("tbMain4");
        for (var i = 0; i < data.length; i++) {
            //遍历一下json数据
            var trow = getDataRow(data[i]); //定义一个方法,返回tr数据
            tbody1.appendChild(trow);
        }

        for (var i = 0; i < data2.length; i++) {
            //遍历一下json数据
            var trow = getDataRow(data2[i]); //定义一个方法,返回tr数据
            tbody2.appendChild(trow);
        }

        for (var i = 0; i < data3.length; i++) {
            //遍历一下json数据
            var trow = getDataRow(data3[i]); //定义一个方法,返回tr数据
            tbody3.appendChild(trow);
        }

        for (var i = 0; i < data4.length; i++) {
            //遍历一下json数据
            var trow = getDataRow(data4[i]); //定义一个方法,返回tr数据
            tbody4.appendChild(trow);
        }
    };

    function getDataRow(h) {
        var row = document.createElement("tr"); //创建行
        Object.keys(h).forEach(function (key) {
            let Cell = document.createElement("td");
            Cell.innerHTML = h[key];
            row.appendChild(Cell);
        });
        return row; //返回tr数据
    }
</script>
